Skip to content
Sander Vos
Projects

Meridian

A design system for a European bank, rebuilt around one accessible colour ramp.

Read the case study

A brushed aluminium plate with fine parallel grooves under raking light
Year
2026
Status
Shipped
Role
Design engineering lead
Built with
TypeScript, Tailwind, Storybook

Meridian is the design system behind a retail bank used by roughly four million people. It existed before I arrived: eleven repositories, three colour palettes that all claimed to be the real one, and a contrast audit nobody had run in two years.

The problem was arithmetic

Every accessibility failure we found came from the same place. Designers picked colours by eye in a tool that showed them on white, and engineers used those colours on grey, on the brand navy, and inside disabled states. Nothing in the pipeline ever compared a foreground to the background it would actually land on.

So we stopped shipping colours and started shipping pairs. Every token in Meridian names a foreground and the surfaces it is legal on, and the build fails if a pair drops below 4.5:1. It is a boring constraint and it removed a category of bug entirely.

What changed

  • Eleven repositories became one, with the components published as a single versioned package.
  • Three palettes became one twelve-step ramp, generated rather than hand-picked.
  • The contrast audit became a test, so it runs on every commit instead of every two years.

The part that was hard

Not the code. The hard part was that a generated ramp produces a brand navy that is four percent different from the one on the letterhead, and the letterhead is older than the website. We spent six weeks on four percent. In the end the marketing navy stayed for print and the ramp navy shipped for screens, which is a compromise I would defend and did not enjoy reaching.